import { Component } from '@angular/core';

import { HEROES } from './heroes';

@Component({
    moduleId: module.id,
    selector: 'guide-flying-heroes',
    templateUrl: 'pipes-flying-heroes.component.html',
    styles: ['#flyers, #all {font-style: italic}']
})
export class PipesFlyingHeroesComponent {
    heroes: any[] = [];
    canFly = true;
    mutate = true;
    title = 'Flying Heroes (pure pipe)';

    constructor() { this.reset(); }

    addHero(name: string) {
        name = name.trim();
        if (!name) { return; }
        let hero = { name, canFly: this.canFly };
        if (this.mutate) {
            // Pure pipe won't update display because heroes array reference is unchanged
            // Impure pipe will display
            this.heroes.push(hero);
        } else {
            // Pipe updates display because heroes array is a new object
            this.heroes = this.heroes.concat(hero);
        }
    }

    reset() { this.heroes = HEROES.slice(); }
}

////// Identical except for impure pipe //////
@Component({
    moduleId: module.id,
    selector: 'guide-flying-heroes-impure',
    templateUrl: 'pipes-flying-heroes-impure.component.html',
    styles: ['.flyers, .all {font-style: italic}'],
})
export class PipesFlyingHeroesImpureComponent extends PipesFlyingHeroesComponent {
    title = 'Flying Heroes (impure pipe)';
}


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/